<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - 表单验证</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.4adbe52ad34df01b5273.css"><style>.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media(hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.cdk-high-contrast-active .mat-button-focus-overlay{background-color:#fff}.cdk-high-contrast-black-on-white .mat-button-focus-overlay{background-color:#000}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-mini-fab,.cdk-high-contrast-active .mat-raised-button{outline:solid 1px}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active .mat-drawer.mat-drawer-end,.cdk-high-contrast-active [dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c30]{color:#ff0}</style><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-background{display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:"";display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="toc-toc-module-es2015.f8531f591ee147aebcc6.js"></script><script charset="utf-8" src="default~code-code-example-module~code-code-tabs-module-es2015.9efcc76d2979a2e605e0.js"></script><script charset="utf-8" src="code-code-example-module-es2015.fa05e6f700453813d256.js"></script><script charset="utf-8" src="live-example-live-example-module-es2015.a8023d1b084857ef476b.js"></script><script charset="utf-8" src="assets-js-prettify-js-es2015.ba856648f2dd2d930a9b.js"></script></head><body><aio-shell ng-version="9.0.0-rc.11" class="aio-notification-hide folder-guide mode-stable page-guide-form-validation sidenav-open view-SideNav"><div id="top-of-page"></div><mat-toolbar color="primary" class="mat-toolbar app-toolbar no-print mat-primary mat-toolbar-multiple-rows"><mat-toolbar-row class="mat-toolbar-row notification-container"><aio-notification notificationid="survey-february-2019" expirationdate="2019-03-01" class="ng-tns-c22-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content ng-tns-c22-0"><a href="http://bit.ly/angular-survey-2019" target="_blank" class="ng-tns-c22-0"><mat-icon role="img" svgicon="insert_comment" aria-label="Announcement" class="mat-icon notranslate icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button mat-icon-button="" aria-label="Close" class="close-button ng-tns-c22-0 mat-icon-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="close" aria-label="Dismiss notification" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button mat-button="" title="Docs menu" class="hamburger mat-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="menu" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple"></div><div class="mat-button-focus-overlay"></div></button><a href="/" class="nav-link home"><img src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c30="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c30="" role="navigation"><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="features" title="特性"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="docs" title="文档"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="resources" title="资源"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="events" title="会议"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="https://blog.angular.io/" title="博客"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">博客</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="translations/cn/home" title="关于中文版"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input type="search" aria-label="search" placeholder="搜索"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter"><mat-icon role="img" svgicon="logos:twitter" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github"><mat-icon role="img" svgicon="logos:github" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container role="main" class="mat-drawer-container mat-sidenav-container sidenav-container mat-drawer-transition has-floating-toc"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav tabindex="-1" class="mat-drawer mat-sidenav sidenav ng-tns-c18-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted mat-drawer-opened" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container ng-tns-c18-1"><aio-nav-menu class="ng-tns-c18-1"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="docs" title="Angular 文档简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="false"><span>快速上手</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self"><span>你的第一个应用</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self"><span>路由</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/data" title="介绍服务以及如何访问外部数据" target="_self"><span>管理数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self"><span>表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self"><span>部署</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/setup-local" title="使用 Angular CLI 搭建本地开发环境简介" target="_self"><span>搭建环境</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 expanded selected ng-star-inserted" title="Angular 的基本原理" aria-pressed="true"><span>基本原理</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="介绍 Angular 应用中的一些基本概念。" aria-pressed="false"><span>Angular 的基本概念</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用中的基本构造块。" target="_self"><span>基本概念简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于 Angular 模块（NgModules）。" target="_self"><span>模块简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"><span>组件简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"><span>服务与 DI 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="超越基础阶段。" target="_self"><span>后续步骤</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="英雄指南是这里大量 Angular 范例的基础" aria-pressed="false"><span>英雄指南</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self"><span>应用的“外壳”</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self"><span>1. 英雄编辑器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self"><span>2. 显示英雄列表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的视图重构成几个独立的组件。" target="_self"><span>3. 创建特性组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self"><span>4. 添加服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self"><span>5. 添加应用内导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self"><span>6. 从服务器获取数据</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="通过数据绑定构建动态视图" aria-pressed="false"><span>组件与模板</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"><span>显示数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"><span>模板语法</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self"><span>用户输入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self"><span>生命周期钩子</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"><span>组件交互</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"><span>组件样式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self"><span>动态组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素" target="_self"><span>Angular 元素</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"><span>属性型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"><span>结构型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"><span>管道</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 expanded selected ng-star-inserted" title="Angular 的表单" aria-pressed="true"><span>表单</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self"><span>响应式表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self"><span>模板驱动表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 expanded selected ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self"><span>表单验证</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self"><span>动态表单</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Observable 与 RxJS" aria-pressed="false"><span>Observable 与 RxJS</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self"><span>可观察对象(Observable)</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self"><span>RxJS 库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self"><span>Angular 中的可观察对象</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self"><span>用法实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self"><span>与其它技术的比较</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 中的模块" aria-pressed="false"><span>NgModules</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"><span>NgModule 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"><span>JS 模块 vs NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="告诉 Angular 如何在根 &quot;AppModule&quot; 中构造和引导应用。" target="_self"><span>应用的根模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self"><span>常用模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self"><span>特性模块的分类</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"><span>入口组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"><span>特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供商与 NgModule" target="_self"><span>服务提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self"><span>单例服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"><span>惰性加载的特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self"><span>共享 NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"><span>NgModule API</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"><span>NgModule 常见问题</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="依赖注入：创建并注入各种服务。" aria-pressed="false"><span>依赖注入</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self"><span>Angular 依赖注入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self"><span>多级注入器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供商类型的更多知识。" target="_self"><span>DI 提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"><span>DI 实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self"><span>浏览组件树</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self"><span>HttpClient</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"><span>路由与导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 动画系统指南" aria-pressed="false"><span>动画</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self"><span>转场与触发器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self"><span>复杂序列</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self"><span>可复用动画</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self"><span>路由转场动画</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="false"><span>其它技术</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self"><span>安全</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self"><span>国际化（i18n）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/accessibility" title="设计能被所有用户访问的应用" target="_self"><span>无障碍（a11y）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false"><span>Service Worker 与 PWA</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self"><span>快速上手</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self"><span>应用外壳</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self"><span>与 Service Worker 通讯</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self"><span>生产环境下的 Service Worker</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"><span>Service Worker 配置</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"><span>服务端渲染</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="false"><span>从 AngularJS 升级</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"><span>升级步骤</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self"><span>更关注性能的升级方式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self"><span>AngularJS 与 Angular 的概念对照</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="使用共享库扩展 Angular" aria-pressed="false"><span>开发 Angular 库</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self"><span>库概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self"><span>使用已发布的库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self"><span>创建库</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解原理图" aria-pressed="false"><span>原理图（Schematic）</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self"><span>原理图概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self"><span>制作原理图</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self"><span>库的原理图</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cli-builder" title="使用构建器定制 Angular CLI。" target="_self"><span>CLI 构建器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self"><span>Web Worker</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="关于构建、测试和部署的信息" aria-pressed="false"><span>开发工作流</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解 AOT 预先编译器。" aria-pressed="false"><span>AOT 预先编译器</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="学习为何以及如何使用预先编译器。" target="_self"><span>预先编译</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/angular-compiler-options" title="配置 AOT 编译。" target="_self"><span>Angular 编译器选项</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-metadata-errors" title="解决 AOT 编译错误。" target="_self"><span>AOT 元数据错误</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-typecheck" title="Angular 中的模板类型检查。" target="_self"><span>模板类型检查</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self"><span>构建与运行</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self"><span>使用 Bazel 进行构建</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self"><span>测试</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self"><span>发布</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="与开发环境和工具集成起来" aria-pressed="false"><span>开发工具集成</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self"><span>语言服务</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="工作空间与项目的结构，及其配置文件。" aria-pressed="false"><span>配置</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self"><span>项目文件结构</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self"><span>工作区配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self"><span>npm 包</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self"><span>TypeScript 配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self"><span>浏览器支持</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false"><span>发布信息</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self"><span>保持最新</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践。" target="_self"><span>发布实践</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating-to-version-9" title="支持把你的应用从 8 升级到 9。" target="_self"><span>升级到第 9 版</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self"><span>弃用清单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="关于 Angular Ivy 的编译与渲染管道。" target="_self"><span>Angular Ivy</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 语法、编码、术语汇总。" aria-pressed="false"><span>快捷手册</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self"><span>速查表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self"><span>风格指南</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self"><span>词汇表</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular CLI 命令参考手册。" aria-pressed="false"><span>CLI 命令</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self"><span>概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self"><span>使用情况分析</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self"><span>ng add</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self"><span>ng analytics</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self"><span>ng build</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self"><span>ng config</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/deploy" title="ng deploy." target="_self"><span>ng deploy</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self"><span>ng doc</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self"><span>ng e2e</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self"><span>ng generate</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self"><span>ng help</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self"><span>ng lint</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self"><span>ng new</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self"><span>ng run</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self"><span>ng serve</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self"><span>ng test</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self"><span>ng update</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self"><span>ng version</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self"><span>ng xi18n</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self"><span>API 参考手册</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank"><span>互助问答</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank"><span>官方 Material 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"><span>ng-zorro 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank"><span>ng-zorro mobile 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter-io.cn/" title="Flutter 中文文档站" target="_blank"><span>友站：Flutter 中文</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version ng-tns-c18-1"><aio-select><div class="form-select-menu"><button class="form-select-button"><span><strong></strong></span><span>stable (v9.0.0)</span></button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:261px"><main role="main" class="sidenav-content" id="guide-form-validation"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/guide/form-validation.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="form-validation" translation-result="on">表单验证<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#form-validation"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" aria-pressed="false">目录<mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon collapsed mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li class="h2 ng-star-inserted" title="模板驱动验证"><a href="guide/form-validation#template-driven-validation">模板驱动验证</a></li><li class="h2 ng-star-inserted" title="响应式表单的验证"><a href="guide/form-validation#reactive-form-validation">响应式表单的验证</a></li><li class="h3 ng-star-inserted" title="验证器函数"><a href="guide/form-validation#validator-functions">验证器函数</a></li><li class="h3 secondary ng-star-inserted" title="内置验证器"><a href="guide/form-validation#built-in-validators">内置验证器</a></li><li class="h2 secondary ng-star-inserted" title="自定义验证器"><a href="guide/form-validation#custom-validators">自定义验证器</a></li><li class="h3 secondary ng-star-inserted" title="添加响应式表单"><a href="guide/form-validation#adding-to-reactive-forms">添加响应式表单</a></li><li class="h3 secondary ng-star-inserted" title="添加到模板驱动表单"><a href="guide/form-validation#adding-to-template-driven-forms">添加到模板驱动表单</a></li><li class="h2 secondary ng-star-inserted" title="表示控件状态的 CSS 类"><a href="guide/form-validation#control-status-css-classes">表示控件状态的 CSS 类</a></li><li class="h2 secondary ng-star-inserted" title="跨字段交叉验证"><a href="guide/form-validation#cross-field-validation">跨字段交叉验证</a></li><li class="h3 secondary ng-star-inserted" title="添加到响应式表单"><a href="guide/form-validation#adding-to-reactive-forms-1">添加到响应式表单</a></li><li class="h3 secondary ng-star-inserted" title="添加到模板驱动表单中"><a href="guide/form-validation#adding-to-template-driven-forms-1">添加到模板驱动表单中</a></li><li class="h2 secondary ng-star-inserted" title="异步验证"><a href="guide/form-validation#async-validation">异步验证</a></li><li class="h3 secondary ng-star-inserted" title="基础"><a href="guide/form-validation#the-basics">基础</a></li><li class="h3 secondary ng-star-inserted" title="实现自定义异步验证器"><a href="guide/form-validation#implementing-custom-async-validator">实现自定义异步验证器</a></li><li class="h3 secondary ng-star-inserted" title="性能上的注意事项"><a href="guide/form-validation#note-on-performance">性能上的注意事项</a></li></ul><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" aria-pressed="false"></button></div></aio-toc><h1 translation-origin="off" id="form-validation">Form validation<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#form-validation"><i class="material-icons">link</i></a></h1><p translation-result="on">通过验证用户输入的准确性和完整性，来增强整体数据质量。</p><p translation-origin="off">Improve overall data quality by validating user input for accuracy and completeness.</p><p translation-result="on">本文展示了在界面中如何验证用户输入，并显示有用的验证信息，先使用模板驱动表单方式，再使用响应式表单方式。</p><p translation-origin="off">This page shows how to validate user input in the UI and display useful validation messages using both reactive and template-driven forms. It assumes some basic knowledge of the two forms modules.</p><div class="alert is-helpful"><p translation-result="on">参见<a href="guide/forms">表单</a>和<a href="guide/reactive-forms">响应式表单</a>了解关于这些选择的更多知识。</p><p translation-origin="off">If you're new to forms, start by reviewing the <a href="guide/forms">Forms</a> and <a href="guide/reactive-forms">Reactive Forms</a> guides.</p></div><h2 id="template-driven-validation" translation-result="on">模板驱动验证<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#template-driven-validation"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="template-driven-validation">Template-driven validation<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#template-driven-validation"><i class="material-icons">link</i></a></h2><p translation-result="on">为了往模板驱动表单中添加验证机制，你要添加一些验证属性，就像<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">原生的 HTML 表单验证器</a>。 Angular 会用指令来匹配这些具有验证功能的指令。</p><p translation-origin="off">To add validation to a template-driven form, you add the same validation attributes as you would with <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">native HTML form validation</a>. Angular uses directives to match these attributes with validator functions in the framework.</p><p translation-result="on">每当表单控件中的值发生变化时，Angular 就会进行验证，并生成一个验证错误的列表（对应着 INVALID 状态）或者 null（对应着 VALID 状态）。</p><p translation-origin="off">Every time the value of a form control changes, Angular runs validation and generates either a list of validation errors, which results in an INVALID status, or null, which results in a VALID status.</p><p translation-result="on">你可以通过把 <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> 导出成局部模板变量来查看该控件的状态。 比如下面这个例子就把 <code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> 导出成了一个名叫 <code>name</code> 的变量：</p><p translation-origin="off">You can then inspect the control's state by exporting <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> to a local template variable. The following example exports <code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> into a variable called <code>name</code>:</p><code-example path="form-validation/src/app/template/hero-form-template.component.html" region="name-with-error-msg" header="template/hero-form-template.component.html (name)" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input id="name" name="name" class="form-control" required <a href="api/forms/MinLengthValidator" class="code-anchor">minlength</a>="4" appForbiddenName="bob" [(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]="hero.name" #name="<a href="api/forms/NgModel" class="code-anchor">ngModel</a>" &gt; &lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="name.invalid &amp;&amp; (name.dirty || name.touched)" class="alert alert-danger"&gt; &lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="name.errors.required"&gt; Name is required. &lt;/div&gt; &lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="name.errors.minlength"&gt; Name must be at least 4 characters long. &lt;/div&gt; &lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="name.errors.forbiddenName"&gt; Name cannot be Bob. &lt;/div&gt; &lt;/div&gt;</div><header class="ng-star-inserted">template/hero-form-template.component.html (name)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from template/hero-form-template.component.html (name)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"name"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"name"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln">
      </span><span class="atn">required</span><span class="pln"> </span><a href="api/forms/MinLengthValidator" class="code-anchor"><span class="atn">minlength</span></a><span class="pun">=</span><span class="atv">"4"</span><span class="pln"> </span><span class="atn">appForbiddenName</span><span class="pun">=</span><span class="atv">"bob"</span><span class="pln">
      [(</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">)]</span><span class="pun">=</span><span class="atv">"hero.name"</span><span class="pln"> #</span><span class="atn">name</span><span class="pun">=</span><span class="atv">"</span><a href="api/forms/NgModel" class="code-anchor"><span class="atv">ngModel</span></a><span class="atv">"</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"name.invalid &amp;&amp; (name.dirty || name.touched)"</span><span class="pln">
    </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-danger"</span><span class="tag">&gt;</span><span class="pln">

  </span><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"name.errors.required"</span><span class="tag">&gt;</span><span class="pln">
    Name is required.
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"name.errors.minlength"</span><span class="tag">&gt;</span><span class="pln">
    Name must be at least 4 characters long.
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"name.errors.forbiddenName"</span><span class="tag">&gt;</span><span class="pln">
    Name cannot be Bob.
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">

</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">请注意以下几点：</p><p translation-origin="off">Note the following:</p><ul><li><p translation-result="on"> <code>&lt;input&gt;</code> 元素带有一些 HTML 验证属性：<code>required</code> 和 <code><a href="api/forms/MinLengthValidator" class="code-anchor">minlength</a></code>。它还带有一个自定义的验证器指令 <code>forbiddenName</code>。要了解更多信息，参见<a href="guide/form-validation#custom-validators">自定义验证器</a>一节。</p><p translation-origin="off">The <code>&lt;input&gt;</code> element carries the HTML validation attributes: <code>required</code> and <code><a href="api/forms/MinLengthValidator" class="code-anchor">minlength</a></code>. It also carries a custom validator directive, <code>forbiddenName</code>. For more information, see <a href="guide/form-validation#custom-validators">Custom validators</a> section.</p></li><li><p translation-result="on"> <code>#name="<a href="api/forms/NgModel" class="code-anchor">ngModel</a>"</code> 把 <code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> 导出成了一个名叫 <code>name</code> 的局部变量。<code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> 把自己控制的 <code><a href="api/forms/FormControl" class="code-anchor">FormControl</a></code> 实例的属性映射出去，让你能在模板中检查控件的状态，比如 <code>valid</code> 和 <code>dirty</code>。要了解完整的控件属性，参见 API 参考手册中的<a href="api/forms/AbstractControl">AbstractControl</a>。</p><p translation-origin="off"><code>#name="<a href="api/forms/NgModel" class="code-anchor">ngModel</a>"</code> exports <code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> into a local variable called <code>name</code>. <code><a href="api/forms/NgModel" class="code-anchor">NgModel</a></code> mirrors many of the properties of its underlying <code><a href="api/forms/FormControl" class="code-anchor">FormControl</a></code> instance, so you can use this in the template to check for control states such as <code>valid</code> and <code>dirty</code>. For a full list of control properties, see the <a href="api/forms/AbstractControl">AbstractControl</a> API reference.</p></li><li><p translation-result="on"> <code>&lt;div&gt;</code> 元素的 <code>*<a href="api/common/NgIf" class="code-anchor">ngIf</a></code> 展示了一组嵌套的消息 <code>div</code>，但是只在有“name”错误和控制器为 <code>dirty</code> 或者 <code>touched</code> 时才出现。</p><p translation-origin="off">The <code>*<a href="api/common/NgIf" class="code-anchor">ngIf</a></code> on the <code>&lt;div&gt;</code> element reveals a set of nested message <code>divs</code> but only if the <code>name</code> is invalid and the control is either <code>dirty</code> or <code>touched</code>.</p></li><li><p translation-result="on">每个嵌套的 <code>&lt;div&gt;</code> 为其中一个可能出现的验证错误显示一条自定义消息。比如 <code>required</code>、<code><a href="api/forms/MinLengthValidator" class="code-anchor">minlength</a></code> 和 <code>forbiddenName</code>。</p><p translation-origin="off">Each nested <code>&lt;div&gt;</code> can present a custom message for one of the possible validation errors. There are messages for <code>required</code>, <code><a href="api/forms/MinLengthValidator" class="code-anchor">minlength</a></code>, and <code>forbiddenName</code>.</p></li></ul><div class="alert is-helpful"><h4 id="why-check-dirty-and-touched" translation-result="on">为何检查 <strong>dirty</strong> 和 <strong>touched</strong>？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#why-check-dirty-and-touched"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="why-check-dirty-and-touched">Why check <em>dirty</em> and <em>touched</em>?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#why-check-dirty-and-touched"><i class="material-icons">link</i></a></h4><p translation-result="on">你肯定不希望应用在用户还没有编辑过表单的时候就给他们显示错误提示。 对 <code>dirty</code> 和 <code>touched</code> 的检查可以避免这种问题。改变控件的值会改变控件的 <code>dirty</code>（脏）状态，而当控件失去焦点时，就会改变控件的 <code>touched</code>（碰过）状态。</p><p translation-origin="off">You may not want your application to display errors before the user has a chance to edit the form. The checks for <code>dirty</code> and <code>touched</code> prevent errors from showing until the user does one of two things: changes the value, turning the control dirty; or blurs the form control element, setting the control to touched.</p></div><h2 id="reactive-form-validation" translation-result="on">响应式表单的验证<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#reactive-form-validation"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="reactive-form-validation">Reactive form validation<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#reactive-form-validation"><i class="material-icons">link</i></a></h2><p translation-result="on">在响应式表单中，权威数据源是其组件类。不应该通过模板上的属性来添加验证器，而应该在组件类中直接把验证器函数添加到表单控件模型上（<code><a href="api/forms/FormControl" class="code-anchor">FormControl</a></code>）。然后，一旦控件发生了变化，Angular 就会调用这些函数。</p><p translation-origin="off">In a reactive form, the source of truth is the component class. Instead of adding validators through attributes in the template, you add validator functions directly to the form control model in the component class. Angular then calls these functions whenever the value of the control changes.</p><h3 id="validator-functions" translation-result="on">验证器函数<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#validator-functions"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="validator-functions">Validator functions<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#validator-functions"><i class="material-icons">link</i></a></h3><p translation-result="on">有两种验证器函数：同步验证器和异步验证器。</p><p translation-origin="off">There are two types of validator functions: sync validators and async validators.</p><ul><li><p translation-result="on"><strong>同步验证器</strong>函数接受一个控件实例，然后返回一组验证错误或 <code>null</code>。你可以在实例化一个 <code><a href="api/forms/FormControl" class="code-anchor">FormControl</a></code> 时把它作为构造函数的第二个参数传进去。</p><p translation-origin="off"><strong>Sync validators</strong>: functions that take a control instance and immediately return either a set of validation errors or <code>null</code>. You can pass these in as the second argument when you instantiate a <code><a href="api/forms/FormControl" class="code-anchor">FormControl</a></code>.</p></li><li><p translation-result="on"><strong>异步验证器</strong>函数接受一个控件实例，并返回一个承诺（Promise）或可观察对象（Observable），它们稍后会发出一组验证错误或者 <code>null</code>。你可以在实例化一个 <code><a href="api/forms/FormControl" class="code-anchor">FormControl</a></code> 时把它作为构造函数的第三个参数传进去。</p><p translation-origin="off"><strong>Async validators</strong>: functions that take a control instance and return a Promise or Observable that later emits a set of validation errors or <code>null</code>. You can pass these in as the third argument when you instantiate a <code><a href="api/forms/FormControl" class="code-anchor">FormControl</a></code>.</p></li></ul><p translation-result="on">注意：出于性能方面的考虑，只有在所有同步验证器都通过之后，Angular 才会运行异步验证器。当每一个异步验证器都执行完之后，才会设置这些验证错误。</p><p translation-origin="off">Note: for performance reasons, Angular only runs async validators if all sync validators pass. Each must complete before errors are set.</p><h3 id="built-in-validators" translation-result="on">内置验证器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#built-in-validators"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="built-in-validators">Built-in validators<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#built-in-validators"><i class="material-icons">link</i></a></h3><p translation-result="on">你可以<a href="guide/form-validation#custom-validators">写自己的验证器</a>，也可以使用一些 Angular 内置的验证器。</p><p translation-origin="off">You can choose to <a href="guide/form-validation#custom-validators">write your own validator functions</a>, or you can use some of Angular's built-in validators.</p><p translation-result="on">模板驱动表单中可用的那些属性型验证器（如 <code>required</code>、<code><a href="api/forms/MinLengthValidator" class="code-anchor">minlength</a></code> 等）对应于 <code><a href="api/forms/Validators" class="code-anchor">Validators</a></code> 类中的同名函数。要想查看内置验证器的全列表，参见 API 参考手册中的<a href="api/forms/Validators">验证器</a>部分。</p><p translation-origin="off">The same built-in validators that are available as attributes in template-driven forms, such as <code>required</code> and <code><a href="api/forms/MinLengthValidator" class="code-anchor">minlength</a></code>, are all available to use as functions from the <code><a href="api/forms/Validators" class="code-anchor">Validators</a></code> class. For a full list of built-in validators, see the <a href="api/forms/Validators">Validators</a> API reference.</p><p translation-result="on">要想把这个英雄表单改造成一个响应式表单，你还是用那些内置验证器，但这次改为用它们的函数形态。</p><p translation-origin="off">To update the hero form to be a reactive form, you can use some of the same built-in validators—this time, in function form. See below:</p><a id="reactive-component-class"></a><code-example path="form-validation/src/app/reactive/hero-form-reactive.component.1.ts" region="form-group" header="reactive/hero-form-reactive.component.ts (validator functions)" ng-version="9.0.0-rc.11"><div style="display:none">ngOnInit(): void { this.heroForm = new <a href="api/forms/FormGroup" class="code-anchor">FormGroup</a>({ 'name': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>(this.hero.name, [ Validators.required, Validators.minLength(4), forbiddenNameValidator(/bob/i) // &lt;-- Here's how you pass in the custom validator. ]), 'alterEgo': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>(this.hero.alterEgo), 'power': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>(this.hero.power, Validators.required) }); } get name() { return this.heroForm.get('name'); } get power() { return this.heroForm.get('power'); }</div><header class="ng-star-inserted">reactive/hero-form-reactive.component.ts (validator functions)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from reactive/hero-form-reactive.component.ts (validator functions)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ngOnInit</span><span class="pun">():</span><span class="pln"> </span><span class="kwd">void</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">heroForm </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormGroup" class="code-anchor"><span class="typ">FormGroup</span></a><span class="pun">({</span><span class="pln">
    </span><span class="str">'name'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero</span><span class="pun">.</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
      </span><span class="typ">Validators</span><span class="pun">.</span><span class="pln">required</span><span class="pun">,</span><span class="pln">
      </span><span class="typ">Validators</span><span class="pun">.</span><span class="pln">minLength</span><span class="pun">(</span><span class="lit">4</span><span class="pun">),</span><span class="pln">
      forbiddenNameValidator</span><span class="pun">(</span><span class="str">/bob/</span><span class="pln">i</span><span class="pun">)</span><span class="pln"> </span><span class="com">// &lt;-- Here's how you pass in the custom validator.</span><span class="pln">
    </span><span class="pun">]),</span><span class="pln">
    </span><span class="str">'alterEgo'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero</span><span class="pun">.</span><span class="pln">alterEgo</span><span class="pun">),</span><span class="pln">
    </span><span class="str">'power'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero</span><span class="pun">.</span><span class="pln">power</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Validators</span><span class="pun">.</span><span class="pln">required</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">

</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">get</span><span class="pln"> name</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">heroForm</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'name'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln">

</span><span class="kwd">get</span><span class="pln"> power</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">heroForm</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'power'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">注意</p><p translation-origin="off">Note that:</p><ul><li><p translation-result="on"> <code>name</code> 控件设置了两个内置验证器：<code>Validators.required</code> 和 <code>Validators.minLength(4)</code>。要了解更多信息，参见本章的<a href="guide/form-validation#custom-validators">自定义验证器</a>一节。</p><p translation-origin="off">The name control sets up two built-in validators—<code>Validators.required</code> and <code>Validators.minLength(4)</code>—and one custom validator, <code>forbiddenNameValidator</code>. For more details see the <a href="guide/form-validation#custom-validators">Custom validators</a> section in this guide.</p></li><li><p translation-result="on">由于这些验证器都是同步验证器，因此你要把它们作为第二个参数传进去。</p><p translation-origin="off">As these validators are all sync validators, you pass them in as the second argument.</p></li><li><p translation-result="on">可以通过把这些函数放进一个数组后传进去，可以支持多重验证器。</p><p translation-origin="off">Support multiple validators by passing the functions in as an array.</p></li><li><p translation-result="on">这个例子添加了一些 getter 方法。在响应式表单中，你通常会通过它所属的控件组（FormGroup）的 <code>get</code> 方法来访问表单控件，但有时候为模板定义一些 getter 作为简短形式。</p><p translation-origin="off">This example adds a few getter methods. In a reactive form, you can always access any form control through the <code>get</code> method on its parent group, but sometimes it's useful to define getters as shorthands for the template.</p></li></ul><p translation-result="on">如果你到模板中找到 name 输入框，就会发现它和模板驱动的例子很相似。</p><p translation-origin="off">If you look at the template for the name input again, it is fairly similar to the template-driven example.</p><code-example path="form-validation/src/app/reactive/hero-form-reactive.component.html" region="name-with-error-msg" header="reactive/hero-form-reactive.component.html (name with error msg)" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input id="name" class="form-control" <a href="api/forms/FormControlName" class="code-anchor">formControlName</a>="name" required &gt; &lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="name.invalid &amp;&amp; (name.dirty || name.touched)" class="alert alert-danger"&gt; &lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="name.errors.required"&gt; Name is required. &lt;/div&gt; &lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="name.errors.minlength"&gt; Name must be at least 4 characters long. &lt;/div&gt; &lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="name.errors.forbiddenName"&gt; Name cannot be Bob. &lt;/div&gt; &lt;/div&gt;</div><header class="ng-star-inserted">reactive/hero-form-reactive.component.html (name with error msg)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from reactive/hero-form-reactive.component.html (name with error msg)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"name"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln">
      </span><a href="api/forms/FormControlName" class="code-anchor"><span class="atn">formControlName</span></a><span class="pun">=</span><span class="atv">"name"</span><span class="pln"> </span><span class="atn">required</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"name.invalid &amp;&amp; (name.dirty || name.touched)"</span><span class="pln">
    </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-danger"</span><span class="tag">&gt;</span><span class="pln">

  </span><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"name.errors.required"</span><span class="tag">&gt;</span><span class="pln">
    Name is required.
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"name.errors.minlength"</span><span class="tag">&gt;</span><span class="pln">
    Name must be at least 4 characters long.
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"name.errors.forbiddenName"</span><span class="tag">&gt;</span><span class="pln">
    Name cannot be Bob.
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">关键改动是：</p><p translation-origin="off">Key takeaways:</p><ul><li><p translation-result="on">该表单不再导出任何指令，而是使用组件类中定义的 <code>name</code> 读取器。</p><p translation-origin="off">The form no longer exports any directives, and instead uses the <code>name</code> getter defined in the component class.</p></li><li><p translation-result="on"> <code>required</code> 属性仍然存在，虽然验证不再需要它，但你仍然要在模板中保留它，以支持 CSS 样式或可访问性。</p><p translation-origin="off">The <code>required</code> attribute is still present. While it's not necessary for validation purposes, you may want to keep it in your template for CSS styling or accessibility reasons.</p></li></ul><h2 id="custom-validators" translation-result="on">自定义验证器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#custom-validators"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="custom-validators">Custom validators<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#custom-validators"><i class="material-icons">link</i></a></h2><p translation-result="on">由于内置验证器无法适用于所有应用场景，有时候你还是得创建自定义验证器。</p><p translation-origin="off">Since the built-in validators won't always match the exact use case of your application, sometimes you'll want to create a custom validator.</p><p translation-result="on">考虑前面的<a href="guide/form-validation#reactive-component-class">例子</a>中的 <code>forbiddenNameValidator</code> 函数。该函数的定义看起来是这样的：</p><p translation-origin="off">Consider the <code>forbiddenNameValidator</code> function from previous <a href="guide/form-validation#reactive-component-class">examples</a> in this guide. Here's what the definition of that function looks like:</p><code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="custom-validator" header="shared/forbidden-name.directive.ts (forbiddenNameValidator)" ng-version="9.0.0-rc.11"><div style="display:none">/** A hero's name can't match the given regular expression */ export function forbiddenNameValidator(nameRe: RegExp): <a href="api/forms/ValidatorFn" class="code-anchor">ValidatorFn</a> { return (control: <a href="api/forms/AbstractControl" class="code-anchor">AbstractControl</a>): {[key: string]: any} | null =&gt; { const forbidden = nameRe.test(control.value); return forbidden ? {'forbiddenName': {value: control.value}} : null; }; }</div><header class="ng-star-inserted">shared/forbidden-name.directive.ts (forbiddenNameValidator)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from shared/forbidden-name.directive.ts (forbiddenNameValidator)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">/** A hero's name can't match the given regular expression */</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> forbiddenNameValidator</span><span class="pun">(</span><span class="pln">nameRe</span><span class="pun">:</span><span class="pln"> </span><span class="typ">RegExp</span><span class="pun">):</span><span class="pln"> </span><a href="api/forms/ValidatorFn" class="code-anchor"><span class="typ">ValidatorFn</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">(</span><span class="pln">control</span><span class="pun">:</span><span class="pln"> </span><a href="api/forms/AbstractControl" class="code-anchor"><span class="typ">AbstractControl</span></a><span class="pun">):</span><span class="pln"> </span><span class="pun">{[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> any</span><span class="pun">}</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="kwd">null</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">const</span><span class="pln"> forbidden </span><span class="pun">=</span><span class="pln"> nameRe</span><span class="pun">.</span><span class="pln">test</span><span class="pun">(</span><span class="pln">control</span><span class="pun">.</span><span class="kwd">value</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> forbidden </span><span class="pun">?</span><span class="pln"> </span><span class="pun">{</span><span class="str">'forbiddenName'</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="kwd">value</span><span class="pun">:</span><span class="pln"> control</span><span class="pun">.</span><span class="kwd">value</span><span class="pun">}}</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">};</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">这个函数实际上是一个工厂，它接受一个用来检测指定名字是否已被禁用的正则表达式，并返回一个验证器函数。</p><p translation-origin="off">The function is actually a factory that takes a regular expression to detect a <em>specific</em> forbidden name and returns a validator function.</p><p translation-result="on">在本例中，禁止的名字是“bob”； 验证器会拒绝任何带有“bob”的英雄名字。 在其他地方，只要配置的正则表达式可以匹配上，它可能拒绝“alice”或者任何其他名字。</p><p translation-origin="off">In this sample, the forbidden name is "bob", so the validator will reject any hero name containing "bob". Elsewhere it could reject "alice" or any name that the configuring regular expression matches.</p><p translation-result="on"><code>forbiddenNameValidator</code> 工厂函数返回配置好的验证器函数。 该函数接受一个 Angular 控制器对象，并在控制器值有效时返回 null，或无效时返回验证错误对象。 验证错误对象通常有一个名为验证秘钥（<code>forbiddenName</code>）的属性。其值为一个任意词典，你可以用来插入错误信息（<code>{name}</code>）。</p><p translation-origin="off">The <code>forbiddenNameValidator</code> factory returns the configured validator function. That function takes an Angular control object and returns <em>either</em> null if the control value is valid <em>or</em> a validation error object. The validation error object typically has a property whose name is the validation key, <code>'forbiddenName'</code>, and whose value is an arbitrary dictionary of values that you could insert into an error message, <code>{name}</code>.</p><p translation-result="on">自定义异步验证器和同步验证器很像，只是它们必须返回一个稍后会输出 null 或“验证错误对象”的承诺（Promise）或可观察对象，如果是可观察对象，那么它必须在某个时间点被完成（complete），那时候这个表单就会使用它输出的最后一个值作为验证结果。（译注：HTTP 服务是自动完成的，但是某些自定义的可观察对象可能需要手动调用 complete 方法）</p><p translation-origin="off">Custom async validators are similar to sync validators, but they must instead return a Promise or Observable that later emits null or a validation error object. In the case of an Observable, the Observable must complete, at which point the form uses the last value emitted for validation.</p><h3 id="adding-to-reactive-forms" translation-result="on">添加响应式表单<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#adding-to-reactive-forms"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="adding-to-reactive-forms">Adding to reactive forms<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#adding-to-reactive-forms"><i class="material-icons">link</i></a></h3><p translation-result="on">在响应式表单组件中，添加自定义验证器相当简单。你所要做的一切就是直接把这个函数传给 <code><a href="api/forms/FormControl" class="code-anchor">FormControl</a></code> 。</p><p translation-origin="off">In reactive forms, custom validators are fairly simple to add. All you have to do is pass the function directly to the <code><a href="api/forms/FormControl" class="code-anchor">FormControl</a></code>.</p><code-example path="form-validation/src/app/reactive/hero-form-reactive.component.1.ts" region="custom-validator" header="reactive/hero-form-reactive.component.ts (validator functions)" ng-version="9.0.0-rc.11"><div style="display:none">this.heroForm = new <a href="api/forms/FormGroup" class="code-anchor">FormGroup</a>({ 'name': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>(this.hero.name, [ Validators.required, Validators.minLength(4), forbiddenNameValidator(/bob/i) // &lt;-- Here's how you pass in the custom validator. ]), 'alterEgo': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>(this.hero.alterEgo), 'power': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>(this.hero.power, Validators.required) });</div><header class="ng-star-inserted">reactive/hero-form-reactive.component.ts (validator functions)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from reactive/hero-form-reactive.component.ts (validator functions)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">this</span><span class="pun">.</span><span class="pln">heroForm </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormGroup" class="code-anchor"><span class="typ">FormGroup</span></a><span class="pun">({</span><span class="pln">
  </span><span class="str">'name'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero</span><span class="pun">.</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">Validators</span><span class="pun">.</span><span class="pln">required</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">Validators</span><span class="pun">.</span><span class="pln">minLength</span><span class="pun">(</span><span class="lit">4</span><span class="pun">),</span><span class="pln">
    forbiddenNameValidator</span><span class="pun">(</span><span class="str">/bob/</span><span class="pln">i</span><span class="pun">)</span><span class="pln"> </span><span class="com">// &lt;-- Here's how you pass in the custom validator.</span><span class="pln">
  </span><span class="pun">]),</span><span class="pln">
  </span><span class="str">'alterEgo'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero</span><span class="pun">.</span><span class="pln">alterEgo</span><span class="pun">),</span><span class="pln">
  </span><span class="str">'power'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero</span><span class="pun">.</span><span class="pln">power</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Validators</span><span class="pun">.</span><span class="pln">required</span><span class="pun">)</span><span class="pln">
</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><h3 id="adding-to-template-driven-forms" translation-result="on">添加到模板驱动表单<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#adding-to-template-driven-forms"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="adding-to-template-driven-forms">Adding to template-driven forms<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#adding-to-template-driven-forms"><i class="material-icons">link</i></a></h3><p translation-result="on">在模板驱动表单中，你不用直接访问 <code><a href="api/forms/FormControl" class="code-anchor">FormControl</a></code> 实例。所以不能像响应式表单中那样把验证器传进去，而应该在模板中添加一个指令。</p><p translation-origin="off">In template-driven forms, you don't have direct access to the <code><a href="api/forms/FormControl" class="code-anchor">FormControl</a></code> instance, so you can't pass the validator in like you can for reactive forms. Instead, you need to add a directive to the template.</p><p translation-result="on"><code>ForbiddenValidatorDirective</code> 指令相当于 <code>forbiddenNameValidator</code> 的包装器。</p><p translation-origin="off">The corresponding <code>ForbiddenValidatorDirective</code> serves as a wrapper around the <code>forbiddenNameValidator</code>.</p><p translation-result="on">Angular 在验证过程中能识别出指令的作用，是因为指令把自己注册成了 <code><a href="api/forms/NG_VALIDATORS" class="code-anchor">NG_VALIDATORS</a></code> 提供商，该提供商拥有一组可扩展的验证器。</p><p translation-origin="off">Angular recognizes the directive's role in the validation process because the directive registers itself with the <code><a href="api/forms/NG_VALIDATORS" class="code-anchor">NG_VALIDATORS</a></code> provider, a provider with an extensible collection of validators.</p><code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="directive-providers" header="shared/forbidden-name.directive.ts (providers)" ng-version="9.0.0-rc.11"><div style="display:none">providers: [{provide: <a href="api/forms/NG_VALIDATORS" class="code-anchor">NG_VALIDATORS</a>, <a href="api/core/ExistingSansProvider#useExisting" class="code-anchor">useExisting</a>: ForbiddenValidatorDirective, multi: true}]</div><header class="ng-star-inserted">shared/forbidden-name.directive.ts (providers)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from shared/forbidden-name.directive.ts (providers)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/forms/NG_VALIDATORS" class="code-anchor"><span class="pln">NG_VALIDATORS</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ExistingSansProvider#useExisting" class="code-anchor"><span class="pln">useExisting</span></a><span class="pun">:</span><span class="pln"> </span><span class="typ">ForbiddenValidatorDirective</span><span class="pun">,</span><span class="pln"> multi</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">}]</span></code>
    </pre></aio-code></code-example><p translation-result="on">然后该指令类实现了 <code><a href="api/forms/Validator" class="code-anchor">Validator</a></code> 接口，以便它能简单的与 Angular 表单集成在一起。这个指令的其余部分有助于你理解它们是如何协作的：</p><p translation-origin="off">The directive class then implements the <code><a href="api/forms/Validator" class="code-anchor">Validator</a></code> interface, so that it can easily integrate with Angular forms. Here is the rest of the directive to help you get an idea of how it all comes together:</p><code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="directive" header="shared/forbidden-name.directive.ts (directive)" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Directive" class="code-anchor">Directive</a>({ selector: '[appForbiddenName]', providers: [{provide: <a href="api/forms/NG_VALIDATORS" class="code-anchor">NG_VALIDATORS</a>, <a href="api/core/ExistingSansProvider#useExisting" class="code-anchor">useExisting</a>: ForbiddenValidatorDirective, multi: true}] }) export class ForbiddenValidatorDirective implements <a href="api/forms/Validator" class="code-anchor">Validator</a> { @<a href="api/core/Input" class="code-anchor">Input</a>('appForbiddenName') forbiddenName: string; validate(control: <a href="api/forms/AbstractControl" class="code-anchor">AbstractControl</a>): {[key: string]: any} | null { return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control) : null; } }</div><header class="ng-star-inserted">shared/forbidden-name.directive.ts (directive)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from shared/forbidden-name.directive.ts (directive)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Directive" class="code-anchor"><span class="lit">Directive</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'[appForbiddenName]'</span><span class="pun">,</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/forms/NG_VALIDATORS" class="code-anchor"><span class="pln">NG_VALIDATORS</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ExistingSansProvider#useExisting" class="code-anchor"><span class="pln">useExisting</span></a><span class="pun">:</span><span class="pln"> </span><span class="typ">ForbiddenValidatorDirective</span><span class="pun">,</span><span class="pln"> multi</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">}]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ForbiddenValidatorDirective</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/forms/Validator" class="code-anchor"><span class="typ">Validator</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">(</span><span class="str">'appForbiddenName'</span><span class="pun">)</span><span class="pln"> forbiddenName</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">

  validate</span><span class="pun">(</span><span class="pln">control</span><span class="pun">:</span><span class="pln"> </span><a href="api/forms/AbstractControl" class="code-anchor"><span class="typ">AbstractControl</span></a><span class="pun">):</span><span class="pln"> </span><span class="pun">{[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> any</span><span class="pun">}</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="kwd">null</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">forbiddenName </span><span class="pun">?</span><span class="pln"> forbiddenNameValidator</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">RegExp</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">forbiddenName</span><span class="pun">,</span><span class="pln"> </span><span class="str">'i'</span><span class="pun">))(</span><span class="pln">control</span><span class="pun">)</span><span class="pln">
                              </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">一旦 <code>ForbiddenValidatorDirective</code> 写好了，你只要把 <code>forbiddenName</code> 选择器添加到输入框上就可以激活这个验证器了。比如：</p><p translation-origin="off">Once the <code>ForbiddenValidatorDirective</code> is ready, you can simply add its selector, <code>appForbiddenName</code>, to any input element to activate it. For example:</p><code-example path="form-validation/src/app/template/hero-form-template.component.html" region="name-input" header="template/hero-form-template.component.html (forbidden-name-input)" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input id="name" name="name" class="form-control" required <a href="api/forms/MinLengthValidator" class="code-anchor">minlength</a>="4" appForbiddenName="bob" [(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]="hero.name" #name="<a href="api/forms/NgModel" class="code-anchor">ngModel</a>" &gt;</div><header class="ng-star-inserted">template/hero-form-template.component.html (forbidden-name-input)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from template/hero-form-template.component.html (forbidden-name-input)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"name"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"name"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln">
      </span><span class="atn">required</span><span class="pln"> </span><a href="api/forms/MinLengthValidator" class="code-anchor"><span class="atn">minlength</span></a><span class="pun">=</span><span class="atv">"4"</span><span class="pln"> </span><span class="atn">appForbiddenName</span><span class="pun">=</span><span class="atv">"bob"</span><span class="pln">
      [(</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">)]</span><span class="pun">=</span><span class="atv">"hero.name"</span><span class="pln"> #</span><span class="atn">name</span><span class="pun">=</span><span class="atv">"</span><a href="api/forms/NgModel" class="code-anchor"><span class="atv">ngModel</span></a><span class="atv">"</span><span class="pln"> </span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">你可能注意到了自定义验证器指令是用 <code><a href="api/core/ExistingSansProvider#useExisting" class="code-anchor">useExisting</a></code> 而不是 <code>useClass</code> 来实例化的。注册的验证器必须是这个 <code>ForbiddenValidatorDirective</code> 实例本身，也就是表单中 <code>forbiddenName</code> 属性被绑定到了"bob"的那个。如果用 <code>useClass</code> 来代替 <code><a href="api/core/ExistingSansProvider#useExisting" class="code-anchor">useExisting</a></code>，就会注册一个新的类实例，而它是没有 <code>forbiddenName</code> 的。</p><p translation-origin="off">You may have noticed that the custom validation directive is instantiated with <code><a href="api/core/ExistingSansProvider#useExisting" class="code-anchor">useExisting</a></code> rather than <code>useClass</code>. The registered validator must be <em>this instance</em> of the <code>ForbiddenValidatorDirective</code>—the instance in the form with its <code>forbiddenName</code> property bound to “bob". If you were to replace <code><a href="api/core/ExistingSansProvider#useExisting" class="code-anchor">useExisting</a></code> with <code>useClass</code>, then you’d be registering a new class instance, one that doesn’t have a <code>forbiddenName</code>.</p></div><h2 id="control-status-css-classes" translation-result="on">表示控件状态的 CSS 类<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#control-status-css-classes"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="control-status-css-classes">Control status CSS classes<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#control-status-css-classes"><i class="material-icons">link</i></a></h2><p translation-result="on">像 AngularJS 中一样，Angular 会自动把很多控件属性作为 CSS 类映射到控件所在的元素上。你可以使用这些类来根据表单状态给表单控件元素添加样式。目前支持下列类：</p><p translation-origin="off">Like in AngularJS, Angular automatically mirrors many control properties onto the form control element as CSS classes. You can use these classes to style form control elements according to the state of the form. The following classes are currently supported:</p><ul><li><p><code>.ng-valid</code></p></li><li><p><code>.ng-invalid</code></p></li><li><p><code>.ng-pending</code></p></li><li><p><code>.ng-pristine</code></p></li><li><p><code>.ng-dirty</code></p></li><li><p><code>.ng-untouched</code></p></li><li><p><code>.ng-touched</code></p></li></ul><p translation-result="on">这个英雄表单使用 <code>.ng-valid</code> 和 <code>.ng-invalid</code> 来设置每个表单控件的边框颜色。</p><p translation-origin="off">The hero form uses the <code>.ng-valid</code> and <code>.ng-invalid</code> classes to set the color of each form control's border.</p><code-example path="form-validation/src/assets/forms.css" header="forms.css (status classes)" ng-version="9.0.0-rc.11"><div style="display:none">.ng-valid[required], .ng-valid.required { border-left: 5px solid #42A948; /* green */ } .ng-invalid:not(form) { border-left: 5px solid #a94442; /* red */ }</div><header class="ng-star-inserted">forms.css (status classes)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from forms.css (status classes)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">.</span><span class="pln">ng</span><span class="pun">-</span><span class="pln">valid</span><span class="pun">[</span><span class="pln">required</span><span class="pun">],</span><span class="pln"> </span><span class="pun">.</span><span class="pln">ng</span><span class="pun">-</span><span class="pln">valid</span><span class="pun">.</span><span class="pln">required  </span><span class="pun">{</span><span class="pln">
  border</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> solid </span><span class="com">#42A948; /* green */</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="pun">.</span><span class="pln">ng</span><span class="pun">-</span><span class="pln">invalid</span><span class="pun">:</span><span class="kwd">not</span><span class="pun">(</span><span class="pln">form</span><span class="pun">)</span><span class="pln">  </span><span class="pun">{</span><span class="pln">
  border</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> solid </span><span class="com">#a94442; /* red */</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><h2 id="cross-field-validation" translation-result="on">跨字段交叉验证<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#cross-field-validation"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="cross-field-validation">Cross field validation<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#cross-field-validation"><i class="material-icons">link</i></a></h2><p translation-result="on">本节将展示如何进行跨字段验证。这里假设你已经有了创建自定义验证器所需的基础知识。</p><p translation-origin="off">This section shows how to perform cross field validation. It assumes some basic knowledge of creating custom validators.</p><div class="alert is-helpful"><p translation-result="on">如果你以前没有创建过自定义验证器，请先阅读<a href="guide/form-validation#custom-validators">自定义验证器</a>一节。</p><p translation-origin="off">If you haven't created custom validators before, start by reviewing the <a href="guide/form-validation#custom-validators">custom validators section</a>.</p></div><p translation-result="on">在下一节中，我们要确保英雄们不能通过填写表单来暴露他们的真实身份。要做到这一点，我们就要验证英雄的名字和他的第二人格（alterEgo）是否匹配。</p><p translation-origin="off">In the following section, we will make sure that our heroes do not reveal their true identities by filling out the Hero Form. We will do that by validating that the hero names and alter egos do not match.</p><h3 id="adding-to-reactive-forms-1" translation-result="on">添加到响应式表单<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#adding-to-reactive-forms-1"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="adding-to-reactive-forms-1">Adding to reactive forms<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#adding-to-reactive-forms-1"><i class="material-icons">link</i></a></h3><p translation-result="on">表单具有下列结构：</p><p translation-origin="off">The form has the following structure:</p><code-example language="javascript" ng-version="9.0.0-rc.11"><div style="display:none">const heroForm = new <a href="api/forms/FormGroup" class="code-anchor">FormGroup</a>({ 'name': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>(), 'alterEgo': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>(), 'power': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>() });</div><aio-code><pre class="lang-javascript prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">const</span><span class="pln"> heroForm </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormGroup" class="code-anchor"><span class="typ">FormGroup</span></a><span class="pun">({</span><span class="pln">
  </span><span class="str">'name'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">(),</span><span class="pln">
  </span><span class="str">'alterEgo'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">(),</span><span class="pln">
  </span><span class="str">'power'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">()</span><span class="pln">
</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">注意，name 和 alterEgo 是兄弟控件。要想在单个的自定义验证器中计算这两个控件，我们就得在它们共同的祖先控件（<code><a href="api/forms/FormGroup" class="code-anchor">FormGroup</a></code>）中进行验证。这样，我们就可以查询 <code><a href="api/forms/FormGroup" class="code-anchor">FormGroup</a></code> 的子控件，从而让我们能够比较它们的值。</p><p translation-origin="off">Notice that the name and alterEgo are sibling controls. To evaluate both controls in a single custom validator, we should perform the validation in a common ancestor control: the <code><a href="api/forms/FormGroup" class="code-anchor">FormGroup</a></code>. That way, we can query the <code><a href="api/forms/FormGroup" class="code-anchor">FormGroup</a></code> for the child controls which will allow us to compare their values.</p><p translation-result="on">要想给 <code><a href="api/forms/FormGroup" class="code-anchor">FormGroup</a></code> 添加验证器，就要在创建时把一个新的验证器传给它的第二个参数。</p><p translation-origin="off">To add a validator to the <code><a href="api/forms/FormGroup" class="code-anchor">FormGroup</a></code>, pass the new validator in as the second argument on creation.</p><code-example language="javascript" ng-version="9.0.0-rc.11"><div style="display:none">const heroForm = new <a href="api/forms/FormGroup" class="code-anchor">FormGroup</a>({ 'name': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>(), 'alterEgo': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>(), 'power': new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>() }, { <a href="api/forms/AbstractControlOptions#validators" class="code-anchor">validators</a>: identityRevealedValidator });</div><aio-code><pre class="lang-javascript prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">const</span><span class="pln"> heroForm </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormGroup" class="code-anchor"><span class="typ">FormGroup</span></a><span class="pun">({</span><span class="pln">
  </span><span class="str">'name'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">(),</span><span class="pln">
  </span><span class="str">'alterEgo'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">(),</span><span class="pln">
  </span><span class="str">'power'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">()</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/forms/AbstractControlOptions#validators" class="code-anchor"><span class="pln">validators</span></a><span class="pun">:</span><span class="pln"> identityRevealedValidator </span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">验证器的代码如下：</p><p translation-origin="off">The validator code is as follows:</p><code-example path="form-validation/src/app/shared/identity-revealed.directive.ts" region="cross-validation-validator" header="shared/identity-revealed.directive.ts" ng-version="9.0.0-rc.11"><div style="display:none">/** A hero's name can't match the hero's alter ego */ export const identityRevealedValidator: <a href="api/forms/ValidatorFn" class="code-anchor">ValidatorFn</a> = (control: <a href="api/forms/FormGroup" class="code-anchor">FormGroup</a>): <a href="api/forms/ValidationErrors" class="code-anchor">ValidationErrors</a> | null =&gt; { const name = control.get('name'); const alterEgo = control.get('alterEgo'); return name &amp;&amp; alterEgo &amp;&amp; name.value === alterEgo.value ? { 'identityRevealed': true } : null; };</div><header class="ng-star-inserted">shared/identity-revealed.directive.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from shared/identity-revealed.directive.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">/** A hero's name can't match the hero's alter ego */</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> identityRevealedValidator</span><span class="pun">:</span><span class="pln"> </span><a href="api/forms/ValidatorFn" class="code-anchor"><span class="typ">ValidatorFn</span></a><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">control</span><span class="pun">:</span><span class="pln"> </span><a href="api/forms/FormGroup" class="code-anchor"><span class="typ">FormGroup</span></a><span class="pun">):</span><span class="pln"> </span><a href="api/forms/ValidationErrors" class="code-anchor"><span class="typ">ValidationErrors</span></a><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="kwd">null</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">const</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> control</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'name'</span><span class="pun">);</span><span class="pln">
  </span><span class="kwd">const</span><span class="pln"> alterEgo </span><span class="pun">=</span><span class="pln"> control</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'alterEgo'</span><span class="pun">);</span><span class="pln">

  </span><span class="kwd">return</span><span class="pln"> name </span><span class="pun">&amp;&amp;</span><span class="pln"> alterEgo </span><span class="pun">&amp;&amp;</span><span class="pln"> name</span><span class="pun">.</span><span class="kwd">value</span><span class="pln"> </span><span class="pun">===</span><span class="pln"> alterEgo</span><span class="pun">.</span><span class="kwd">value</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">'identityRevealed'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">
</span><span class="pun">};</span></code>
    </pre></aio-code></code-example><p translation-result="on">这个身份验证器实现了 <code><a href="api/forms/ValidatorFn" class="code-anchor">ValidatorFn</a></code> 接口。它接收一个 Angular 表单控件对象作为参数，当表单有效时，它返回一个 null，否则返回 <code><a href="api/forms/ValidationErrors" class="code-anchor">ValidationErrors</a></code> 对象。</p><p translation-origin="off">The identity validator implements the <code><a href="api/forms/ValidatorFn" class="code-anchor">ValidatorFn</a></code> interface. It takes an Angular control object as an argument and returns either null if the form is valid, or <code><a href="api/forms/ValidationErrors" class="code-anchor">ValidationErrors</a></code> otherwise.</p><p translation-result="on">我们先通过调用 <code><a href="api/forms/FormGroup" class="code-anchor">FormGroup</a></code> 的 <a href="api/forms/AbstractControl#get">get</a> 方法来获取子控件。然后，简单地比较一下 <code>name</code> 和 <code>alterEgo</code> 控件的值。</p><p translation-origin="off">First we retrieve the child controls by calling the <code><a href="api/forms/FormGroup" class="code-anchor">FormGroup</a></code>'s <a href="api/forms/AbstractControl#get">get</a> method. Then we simply compare the values of the <code>name</code> and <code>alterEgo</code> controls.</p><p translation-result="on">如果这两个值不一样，那么英雄的身份就应该继续保密，我们可以安全的返回 null。否则就说明英雄的身份已经暴露了，我们必须通过返回一个错误对象来把这个表单标记为无效的。</p><p translation-origin="off">If the values do not match, the hero's identity remains secret, and we can safely return null. Otherwise, the hero's identity is revealed and we must mark the form as invalid by returning an error object.</p><p translation-result="on">接下来，为了提供更好的用户体验，当表单无效时，我们还要显示一个恰当的错误信息。</p><p translation-origin="off">Next, to provide better user experience, we show an appropriate error message when the form is invalid.</p><code-example path="form-validation/src/app/reactive/hero-form-reactive.component.html" region="cross-validation-error-message" header="reactive/hero-form-template.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="heroForm.errors?.identityRevealed &amp;&amp; (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger"&gt; Name cannot match alter ego. &lt;/div&gt;</div><header class="ng-star-inserted">reactive/hero-form-template.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from reactive/hero-form-template.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"heroForm.errors?.identityRevealed &amp;&amp; (heroForm.touched || heroForm.dirty)"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"cross-validation-error-message alert alert-danger"</span><span class="tag">&gt;</span><span class="pln">
    Name cannot match alter ego.
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">注意，我们需要检查：</p><p translation-origin="off">Note that we check if:</p><ul><li><p translation-result="on"> <code><a href="api/forms/FormGroup" class="code-anchor">FormGroup</a></code> 应该有一个由 <code>identityRevealed</code> 验证器返回的交叉验证错误对象。</p><p translation-origin="off">the <code><a href="api/forms/FormGroup" class="code-anchor">FormGroup</a></code> has the cross validation error returned by the <code>identityRevealed</code> validator,</p></li><li><p translation-result="on">用户已经和表单进行过<a href="guide/form-validation#why-check-dirty-and-touched">交互</a>。</p><p translation-origin="off">the user is yet to <a href="guide/form-validation#why-check-dirty-and-touched">interact</a> with the form.</p></li></ul><h3 id="adding-to-template-driven-forms-1" translation-result="on">添加到模板驱动表单中<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#adding-to-template-driven-forms-1"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="adding-to-template-driven-forms-1">Adding to template driven forms<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#adding-to-template-driven-forms-1"><i class="material-icons">link</i></a></h3><p translation-result="on">首先，我们必须创建一个指令，它会包装这个验证器函数。我们使用 <code><a href="api/forms/NG_VALIDATORS" class="code-anchor">NG_VALIDATORS</a></code> 令牌来把它作为验证器提供出来。如果你还不清楚为什么要这么做或者不能完全理解这种语法，请重新访问前面的<a href="guide/form-validation#adding-to-template-driven-forms">小节</a>。</p><p translation-origin="off">First we must create a directive that will wrap the validator function. We provide it as the validator using the <code><a href="api/forms/NG_VALIDATORS" class="code-anchor">NG_VALIDATORS</a></code> token. If you are not sure why, or you do not fully understand the syntax, revisit the previous <a href="guide/form-validation#adding-to-template-driven-forms">section</a>.</p><code-example path="form-validation/src/app/shared/identity-revealed.directive.ts" region="cross-validation-directive" header="shared/identity-revealed.directive.ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Directive" class="code-anchor">Directive</a>({ selector: '[appIdentityRevealed]', providers: [{ provide: <a href="api/forms/NG_VALIDATORS" class="code-anchor">NG_VALIDATORS</a>, <a href="api/core/ExistingSansProvider#useExisting" class="code-anchor">useExisting</a>: IdentityRevealedValidatorDirective, multi: true }] }) export class IdentityRevealedValidatorDirective implements <a href="api/forms/Validator" class="code-anchor">Validator</a> { validate(control: <a href="api/forms/AbstractControl" class="code-anchor">AbstractControl</a>): <a href="api/forms/ValidationErrors" class="code-anchor">ValidationErrors</a> { return identityRevealedValidator(control) } }</div><header class="ng-star-inserted">shared/identity-revealed.directive.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from shared/identity-revealed.directive.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Directive" class="code-anchor"><span class="lit">Directive</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'[appIdentityRevealed]'</span><span class="pun">,</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/forms/NG_VALIDATORS" class="code-anchor"><span class="pln">NG_VALIDATORS</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ExistingSansProvider#useExisting" class="code-anchor"><span class="pln">useExisting</span></a><span class="pun">:</span><span class="pln"> </span><span class="typ">IdentityRevealedValidatorDirective</span><span class="pun">,</span><span class="pln"> multi</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">}]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">IdentityRevealedValidatorDirective</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/forms/Validator" class="code-anchor"><span class="typ">Validator</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  validate</span><span class="pun">(</span><span class="pln">control</span><span class="pun">:</span><span class="pln"> </span><a href="api/forms/AbstractControl" class="code-anchor"><span class="typ">AbstractControl</span></a><span class="pun">):</span><span class="pln"> </span><a href="api/forms/ValidationErrors" class="code-anchor"><span class="typ">ValidationErrors</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> identityRevealedValidator</span><span class="pun">(</span><span class="pln">control</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">接下来，我们要把该指令添加到 HTML 模板中。由于验证器必须注册在表单的最高层，所以我们要把该指令放在 <code>form</code> 标签上。</p><p translation-origin="off">Next, we have to add the directive to the html template. Since the validator must be registered at the highest level in the form, we put the directive on the <code>form</code> tag.</p><code-example path="form-validation/src/app/template/hero-form-template.component.html" region="cross-validation-register-validator" header="template/hero-form-template.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;form #heroForm="<a href="api/forms/NgForm" class="code-anchor">ngForm</a>" appIdentityRevealed&gt;</div><header class="ng-star-inserted">template/hero-form-template.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from template/hero-form-template.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;form</span><span class="pln"> #</span><span class="atn">heroForm</span><span class="pun">=</span><span class="atv">"</span><a href="api/forms/NgForm" class="code-anchor"><span class="atv">ngForm</span></a><span class="atv">"</span><span class="pln"> </span><span class="atn">appIdentityRevealed</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">为了提供更好的用户体验，当表单无效时，我们要显示一个恰当的错误信息。</p><p translation-origin="off">To provide better user experience, we show an appropriate error message when the form is invalid.</p><code-example path="form-validation/src/app/template/hero-form-template.component.html" region="cross-validation-error-message" header="template/hero-form-template.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="heroForm.errors?.identityRevealed &amp;&amp; (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger"&gt; Name cannot match alter ego. &lt;/div&gt;</div><header class="ng-star-inserted">template/hero-form-template.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from template/hero-form-template.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"heroForm.errors?.identityRevealed &amp;&amp; (heroForm.touched || heroForm.dirty)"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"cross-validation-error-message alert alert-danger"</span><span class="tag">&gt;</span><span class="pln">
    Name cannot match alter ego.
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">注意，我们需要检查：</p><p translation-origin="off">Note that we check if:</p><ul><li><p translation-result="on">该表单具有一个由 <code>identityRevealed</code> 验证器提供的交叉验证错误对象。</p><p translation-origin="off">the form has the cross validation error returned by the <code>identityRevealed</code> validator,</p></li><li><p translation-result="on">用户已经和表单进行过<a href="guide/form-validation#why-check-dirty-and-touched">交互</a>。</p><p translation-origin="off">the user is yet to <a href="guide/form-validation#why-check-dirty-and-touched">interact</a> with the form.</p></li></ul><p translation-result="on">这样就完成了这个交叉验证的例子。我们的做法是：</p><p translation-origin="off">This completes the cross validation example. We managed to:</p><ul><li><p translation-result="on">基于两个相邻控件的值来验证表单</p><p translation-origin="off">validate the form based on the values of two sibling controls,</p></li><li><p translation-result="on">当用户与表单交互过并且验证失败时，才显示一个描述性的错误信息。</p><p translation-origin="off">show a descriptive error message after the user interacted with the form and the validation failed.</p></li></ul><h2 id="async-validation" translation-result="on">异步验证<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#async-validation"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="async-validation">Async Validation<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#async-validation"><i class="material-icons">link</i></a></h2><p translation-result="on">本节展示如何创建异步验证器。这里假设你已经具有了一些创建<a href="guide/form-validation#custom-validators">自定义验证器</a>的基础知识。</p><p translation-origin="off">This section shows how to create asynchronous validators. It assumes some basic knowledge of creating <a href="guide/form-validation#custom-validators">custom validators</a>.</p><h3 id="the-basics" translation-result="on">基础<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#the-basics"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="the-basics">The Basics<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#the-basics"><i class="material-icons">link</i></a></h3><p translation-result="on">就像同步验证器有 <code><a href="api/forms/ValidatorFn" class="code-anchor">ValidatorFn</a></code> 和 <code><a href="api/forms/Validator" class="code-anchor">Validator</a></code> 接口一样，异步验证器也有自己的对应物：<code><a href="api/forms/AsyncValidatorFn" class="code-anchor">AsyncValidatorFn</a></code> 和 <code><a href="api/forms/AsyncValidator" class="code-anchor">AsyncValidator</a></code>。</p><p translation-origin="off">Just like synchronous validators have the <code><a href="api/forms/ValidatorFn" class="code-anchor">ValidatorFn</a></code> and <code><a href="api/forms/Validator" class="code-anchor">Validator</a></code> interfaces, asynchronous validators have their own counterparts: <code><a href="api/forms/AsyncValidatorFn" class="code-anchor">AsyncValidatorFn</a></code> and <code><a href="api/forms/AsyncValidator" class="code-anchor">AsyncValidator</a></code>.</p><p translation-result="on">它们非常像，但是有下列不同：</p><p translation-origin="off">They are very similar with the only difference being:</p><ul><li><p translation-result="on">它们必须返回承诺（Promise）或可观察对象（Observable），</p><p translation-origin="off">They must return a Promise or an Observable,</p></li><li><p translation-result="on">返回的可观察对象必须是有限的，也就是说，它必须在某个时间点结束（complete）。要把无尽的可观察对象转换成有限的，可以使用 <code>first</code>、<code>last</code>、<code>take</code> 或 <code>takeUntil</code> 等过滤型管道对其进行处理。</p><p translation-origin="off">The observable returned must be finite, meaning it must complete at some point. To convert an infinite observable into a finite one, pipe the observable through a filtering operator such as <code>first</code>, <code>last</code>, <code>take</code>, or <code>takeUntil</code>.</p></li></ul><p translation-result="on">注意！异步验证总是会在同步验证之后执行，并且只有当同步验证成功了之后才会执行。如果更基本的验证方法已经失败了，那么这能让表单避免进行可能会很昂贵的异步验证过程，比如 HTTP 请求。</p><p translation-origin="off">It is important to note that the asynchronous validation happens after the synchronous validation, and is performed only if the synchronous validation is successful. This check allows forms to avoid potentially expensive async validation processes such as an HTTP request if more basic validation methods fail.</p><p translation-result="on">在异步验证器开始之后，表单控件会进入 <code>pending</code> 状态。你可以监视该控件的 <code>pending</code> 属性，利用它来给用户一些视觉反馈，表明正在进行验证。</p><p translation-origin="off">After asynchronous validation begins, the form control enters a <code>pending</code> state. You can inspect the control's <code>pending</code> property and use it to give visual feedback about the ongoing validation.</p><p translation-result="on">常见的 UI 处理模式是在执行异步验证时显示一个旋转指示标（spinner）。下面的例子展示了在模板驱动表单中该怎么做：</p><p translation-origin="off">A common UI pattern is to show a spinner while the async validation is being performed. The following example presents how to achieve this with template-driven forms:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input [(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]="name" #<a href="api/forms/NgModel#model" class="code-anchor">model</a>="<a href="api/forms/NgModel" class="code-anchor">ngModel</a>" appSomeAsyncValidator&gt; &lt;app-spinner *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="model.pending"&gt;&lt;/app-spinner&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> [(</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">)]</span><span class="pun">=</span><span class="atv">"name"</span><span class="pln"> #</span><a href="api/forms/NgModel#model" class="code-anchor"><span class="atn">model</span></a><span class="pun">=</span><span class="atv">"</span><a href="api/forms/NgModel" class="code-anchor"><span class="atv">ngModel</span></a><span class="atv">"</span><span class="pln"> </span><span class="atn">appSomeAsyncValidator</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;app-spinner</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"model.pending"</span><span class="tag">&gt;&lt;/app-spinner&gt;</span></code>
    </pre></aio-code></code-example><h3 id="implementing-custom-async-validator" translation-result="on">实现自定义异步验证器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#implementing-custom-async-validator"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="implementing-custom-async-validator">Implementing Custom Async Validator<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#implementing-custom-async-validator"><i class="material-icons">link</i></a></h3><p translation-result="on">在下一节中，会异步执行一个验证，以确保英雄选取了一个还没有人选过的第二人格。新的英雄不断招募，而老的英雄不断离开。这意味着我们没法提前拿到一个可用的第二人格列表。</p><p translation-origin="off">In the following section, validation is performed asynchronously to ensure that our heroes pick an alter ego that is not already taken. New heroes are constantly enlisting and old heroes are leaving the service. That means that we do not have the list of available alter egos ahead of time.</p><p translation-result="on">要验证潜在的第二人格，我们需要咨询一个存有全部已招募英雄的中央数据库。而这个过程是异步的，我们需要一个特殊的验证器。</p><p translation-origin="off">To validate the potential alter ego, we need to consult a central database of all currently enlisted heroes. The process is asynchronous, so we need a special validator for that.</p><p translation-result="on">我们先创建一个验证器类。</p><p translation-origin="off">Let's start by creating the validator class.</p><code-example path="form-validation/src/app/shared/alter-ego.directive.ts" region="async-validator" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Injectable" class="code-anchor">Injectable</a>({ <a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root' }) export class UniqueAlterEgoValidator implements <a href="api/forms/AsyncValidator" class="code-anchor">AsyncValidator</a> { constructor(private heroesService: HeroesService) {} validate( ctrl: <a href="api/forms/AbstractControl" class="code-anchor">AbstractControl</a> ): Promise&lt;<a href="api/forms/ValidationErrors" class="code-anchor">ValidationErrors</a> | null&gt; | Observable&lt;<a href="api/forms/ValidationErrors" class="code-anchor">ValidationErrors</a> | null&gt; { return this.heroesService.isAlterEgoTaken(ctrl.value).pipe( map(isTaken =&gt; (isTaken ? { uniqueAlterEgo: true } : null)), catchError(() =&gt; of(null)) ); } }</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Injectable" class="code-anchor"><span class="lit">Injectable</span></a><span class="pun">({</span><span class="pln"> </span><a href="api/core/Injectable#providedIn" class="code-anchor"><span class="pln">providedIn</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'root'</span><span class="pln"> </span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">UniqueAlterEgoValidator</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/forms/AsyncValidator" class="code-anchor"><span class="typ">AsyncValidator</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> heroesService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">HeroesService</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span><span class="pln">

  validate</span><span class="pun">(</span><span class="pln">
    ctrl</span><span class="pun">:</span><span class="pln"> </span><a href="api/forms/AbstractControl" class="code-anchor"><span class="typ">AbstractControl</span></a><span class="pln">
  </span><span class="pun">):</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">&lt;</span><a href="api/forms/ValidationErrors" class="code-anchor"><span class="typ">ValidationErrors</span></a><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="typ">Observable</span><span class="pun">&lt;</span><a href="api/forms/ValidationErrors" class="code-anchor"><span class="typ">ValidationErrors</span></a><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">heroesService</span><span class="pun">.</span><span class="pln">isAlterEgoTaken</span><span class="pun">(</span><span class="pln">ctrl</span><span class="pun">.</span><span class="kwd">value</span><span class="pun">).</span><span class="pln">pipe</span><span class="pun">(</span><span class="pln">
      map</span><span class="pun">(</span><span class="pln">isTaken </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">(</span><span class="pln">isTaken </span><span class="pun">?</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> uniqueAlterEgo</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">)),</span><span class="pln">
      catchError</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> of</span><span class="pun">(</span><span class="kwd">null</span><span class="pun">))</span><span class="pln">
    </span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">如你所见，<code>UniqueAlterEgoValidator</code> 类实现了 <code><a href="api/forms/AsyncValidator" class="code-anchor">AsyncValidator</a></code> 接口。在其构造函数中，我们注入了一个 <code>HeroesService</code>，其接口如下：</p><p translation-origin="off">As you can see, the <code>UniqueAlterEgoValidator</code> class implements the <code><a href="api/forms/AsyncValidator" class="code-anchor">AsyncValidator</a></code> interface. In the constructor, we inject the <code>HeroesService</code> that has the following interface:</p><code-example language="typescript" ng-version="9.0.0-rc.11"><div style="display:none">interface HeroesService { isAlterEgoTaken: (alterEgo: string) =&gt; Observable&lt;boolean&gt;; }</div><aio-code><pre class="lang-typescript prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">interface</span><span class="pln"> </span><span class="typ">HeroesService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  isAlterEgoTaken</span><span class="pun">:</span><span class="pln"> </span><span class="pun">(</span><span class="pln">alterEgo</span><span class="pun">:</span><span class="pln"> string</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="typ">Observable</span><span class="pun">&lt;</span><span class="pln">boolean</span><span class="pun">&gt;;</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">在真实的应用中，<code>HeroesService</code> 负责向英雄数据库发起一个 HTTP 请求，以检查该第二人格是否可用。 从该验证器的视角看，此服务的具体实现无关紧要，所以我们仅仅针对 <code>HeroesService</code> 接口来写实现代码。</p><p translation-origin="off">In a real world application, the <code>HeroesService</code> is responsible for making an HTTP request to the hero database to check if the alter ego is available. From the validator's point of view, the actual implementation of the service is not important, so we can just code against the <code>HeroesService</code> interface.</p><p translation-result="on">当验证开始的时候，<code>UniqueAlterEgoValidator</code> 把任务委托给 <code>HeroesService</code> 的 <code>isAlterEgoTaken()</code> 方法，并传入当前控件的值。这时候，该控件会被标记为 <code>pending</code> 状态，直到 <code>validate()</code> 方法所返回的可观察对象完成（complete）了。</p><p translation-origin="off">As the validation begins, the <code>UniqueAlterEgoValidator</code> delegates to the <code>HeroesService</code> <code>isAlterEgoTaken()</code> method with the current control value. At this point the control is marked as <code>pending</code> and remains in this state until the observable chain returned from the <code>validate()</code> method completes.</p><p translation-result="on"><code>isAlterEgoTaken()</code> 方法会发出一个 HTTP 请求，以检查该第二人格是否可用，并返回一个 <code>Observable&lt;boolean&gt;</code> 型结果。我们通过 <code>map</code> 操作符把响应对象串起来，并把它转换成一个有效性结果。 与往常一样，如果表单有效则返回 <code>null</code>，否则返回 <code><a href="api/forms/ValidationErrors" class="code-anchor">ValidationErrors</a></code>。我们还是用 <code>catchError</code> 操作符来确保对任何潜在错误都进行了处理。</p><p translation-origin="off">The <code>isAlterEgoTaken()</code> method dispatches an HTTP request that checks if the alter ego is available, and returns <code>Observable&lt;boolean&gt;</code> as the result. We pipe the response through the <code>map</code> operator and transform it into a validation result. As always, we return <code>null</code> if the form is valid, and <code><a href="api/forms/ValidationErrors" class="code-anchor">ValidationErrors</a></code> if it is not. We make sure to handle any potential errors with the <code>catchError</code> operator.</p><p translation-result="on">这里，我们决定将 <code>isAlterEgoTaken()</code> 中的错误视为成功验证，因为如果没能发起验证请求，未必代表这个第二人格是无效的。你也可以将其视为失败，并返回 <code>ValidationError</code> 对象。</p><p translation-origin="off">Here we decided that <code>isAlterEgoTaken()</code> error is treated as a successful validation, because failure to make a validation request does not necessarily mean that the alter ego is invalid. You could handle the error differently and return the <code>ValidationError</code> object instead.</p><p translation-result="on">一段时间之后，可观察对象完成了，异步验证也就结束了。这时候 <code>pending</code> 标志就改成了 <code>false</code>，并且表单的有效性也更新了。</p><p translation-origin="off">After some time passes, the observable chain completes and the async validation is done. The <code>pending</code> flag is set to <code>false</code>, and the form validity is updated.</p><h3 id="note-on-performance" translation-result="on">性能上的注意事项<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#note-on-performance"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="note-on-performance">Note on performance<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/form-validation#note-on-performance"><i class="material-icons">link</i></a></h3><p translation-result="on">默认情况下，每当表单值变化之后，都会执行所有验证器。对于同步验证器，没有什么会显著影响应用性能的地方。不过，异步验证器通常会执行某种 HTTP 请求来对控件进行验证。如果在每次按键之后都发出 HTTP 请求会给后端 API 带来沉重的负担，应该尽量避免。</p><p translation-origin="off">By default, all validators are run after every form value change. With synchronous validators, this will not likely have a noticeable impact on application performance. However, it's common for async validators to perform some kind of HTTP request to validate the control. Dispatching an HTTP request after every keystroke could put a strain on the backend API, and should be avoided if possible.</p><p translation-result="on">我们可以把 <code>updateOn</code> 属性从 <code>change</code>（默认值）改成 <code>submit</code> 或 <code>blur</code> 来推迟表单验证的更新时机。</p><p translation-origin="off">We can delay updating the form validity by changing the <code>updateOn</code> property from <code>change</code> (default) to <code>submit</code> or <code>blur</code>.</p><p translation-result="on">对于模板驱动表单：</p><p translation-origin="off">With template-driven forms:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;input [(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]="name" [ngModelOptions]="{updateOn: 'blur'}"&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;input</span><span class="pln"> [(</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">)]</span><span class="pun">=</span><span class="atv">"name"</span><span class="pln"> [</span><span class="atn">ngModelOptions</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"{updateOn: 'blur'}"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">对于响应式表单：</p><p translation-origin="off">With reactive forms:</p><code-example language="typescript" ng-version="9.0.0-rc.11"><div style="display:none">new <a href="api/forms/FormControl" class="code-anchor">FormControl</a>('', {updateOn: 'blur'});</div><aio-code><pre class="lang-typescript prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">new</span><span class="pln"> </span><a href="api/forms/FormControl" class="code-anchor"><span class="typ">FormControl</span></a><span class="pun">(</span><span class="str">''</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">updateOn</span><span class="pun">:</span><span class="pln"> </span><span class="str">'blur'</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on"><strong>你可以运行<live-example ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="在线例子" href="generated/live-examples/form-validation/stackblitz.html">在线例子</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/form-validation/form-validation.zip">下载范例</a></span></span></span></live-example>来查看完整的响应式和模板驱动表单的代码。</strong></p><p translation-origin="off"><strong>You can run the<live-example ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="在线例子" href="generated/live-examples/form-validation/stackblitz.html">在线例子</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/form-validation/form-validation.zip">下载范例</a></span></span></span></live-example>to see the complete reactive and template-driven example code.</strong></p></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li class="h1 ng-star-inserted active" title="表单验证"><a href="guide/form-validation#form-validation">表单验证</a></li><li class="h2 ng-star-inserted" title="模板驱动验证"><a href="guide/form-validation#template-driven-validation">模板驱动验证</a></li><li class="h2 ng-star-inserted" title="响应式表单的验证"><a href="guide/form-validation#reactive-form-validation">响应式表单的验证</a></li><li class="h3 ng-star-inserted" title="验证器函数"><a href="guide/form-validation#validator-functions">验证器函数</a></li><li class="h3 ng-star-inserted" title="内置验证器"><a href="guide/form-validation#built-in-validators">内置验证器</a></li><li class="h2 ng-star-inserted" title="自定义验证器"><a href="guide/form-validation#custom-validators">自定义验证器</a></li><li class="h3 ng-star-inserted" title="添加响应式表单"><a href="guide/form-validation#adding-to-reactive-forms">添加响应式表单</a></li><li class="h3 ng-star-inserted" title="添加到模板驱动表单"><a href="guide/form-validation#adding-to-template-driven-forms">添加到模板驱动表单</a></li><li class="h2 ng-star-inserted" title="表示控件状态的 CSS 类"><a href="guide/form-validation#control-status-css-classes">表示控件状态的 CSS 类</a></li><li class="h2 ng-star-inserted" title="跨字段交叉验证"><a href="guide/form-validation#cross-field-validation">跨字段交叉验证</a></li><li class="h3 ng-star-inserted" title="添加到响应式表单"><a href="guide/form-validation#adding-to-reactive-forms-1">添加到响应式表单</a></li><li class="h3 ng-star-inserted" title="添加到模板驱动表单中"><a href="guide/form-validation#adding-to-template-driven-forms-1">添加到模板驱动表单中</a></li><li class="h2 ng-star-inserted" title="异步验证"><a href="guide/form-validation#async-validation">异步验证</a></li><li class="h3 ng-star-inserted" title="基础"><a href="guide/form-validation#the-basics">基础</a></li><li class="h3 ng-star-inserted" title="实现自定义异步验证器"><a href="guide/form-validation#implementing-custom-async-validator">实现自定义异步验证器</a></li><li class="h3 ng-star-inserted" title="性能上的注意事项"><a href="guide/form-validation#note-on-performance">性能上的注意事项</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Angular events around the world.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2020. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：9.0.1-build.79+sha.55f1ef01.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.ee607cf78010348c8334.js" type="module"></script><script src="runtime-es5.ee607cf78010348c8334.js" nomodule="" defer=""></script><script src="polyfills-es5.1494ca908613f3429457.js" nomodule="" defer=""></script><script src="polyfills-es2015.9057a05c650bf60ecbf4.js" type="module"></script><script src="main-es2015.9cd62e243bd182514a19.js" type="module"></script><script src="main-es5.9cd62e243bd182514a19.js" nomodule="" defer=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>